<template>
  <div>
    <!-- head  -->
    <fixingtop :list="totalList"
               @changeFm="changeFmFn"></fixingtop>
    <!-- main -->
    <el-card class="box-card box_bottom">
      <div>
        <fixingbtn @click.native="show"></fixingbtn>
        <button class="btn1"
                @click="getgameData">批量操作</button>
      </div>

      <div>
        <fixingbottom :list="Fmdata"
                      :num="totalCount"
                      :totalPage="totalPage"
                      :xinghao="xinghao"
                      :dianwei="dianwei"
                      :dianweilist="dianweilist"
                      :xinghaolist="xinghaolist"
                      @getmultipleSelection="multipleSelectionlist"
                      :detailList.sync="detailList"></fixingbottom>
      </div>
    </el-card>
    <!-- 弹框1 -->
    <el-dialog title="批量策略管理"
               :visible.sync="Bulk_policy"
               width="30%"
               :before-close="handleCloseFn">
      <el-form label-width="120px"
               size="medium"
               v-loading="loading">
        <el-form-item label="选择策略：">
          <el-select v-model="Bulk_policy_text"
                     placeholder="请选择活动区域"
                     class="select_option">
            <el-option v-for="item in getgamedata"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="Bulk_policy = false"
                   class="btn11">取 消</el-button>
        <el-button type="primary"
                   @click="goapplyPolicy">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹框1 -->

  </div>
</template>

<script>
import fixingtop from '@/components/fixingCompts/fixingtop.vue'
import fixingbtn from '@/components/fixingCompts/fixingBtn'
import fixingbottom from '@/components/fixingCompts/fixingbottom.vue'
import {
  getsearchList,
  getadd,
  getaddxinghao,
  getgamedata,
  GetApplyPolicy
} from '@/api/fixing/fixing'

export default {
  data () {
    return {
      loading: false,
      Fmdata: [],
      totalCount: 0,
      totalPage: '',
      totalList: [],
      xinghao: '',
      dianwei: '',
      xinghaolist: '',
      dianweilist: '',
      detailList: [],
      Bulk_policy: false,
      multipleSelection: [],
      getgamedata: [],
      Bulk_policy_text: '', // 策略的input双向绑定值

      applyPolicy: []// 批量策略管理原数据
    }
  },
  async created () {
    const res = await getsearchList({
      pageIndex: 1,
      pageSize: 10
    })
    this.detailList = res.data.currentPageRecords
    // console.log(this.detailList);
    this.totalCount = res.data.totalCount
    this.totalPage = res.data.totalPage
    // console.log(res.data.totalCount);

    const Fmdata = res.data.currentPageRecords.map((item, index) => {
      return {
        num: index + 1,
        number: item.innerCode,
        model: item.type.name,
        address: item.node.name,
        partners: item.ownerName,
        state:
          item.vmStatus === 1
            ? '运营'
            : '' || item.vmStatus === 0
              ? '未投放'
              : '' || item.vmStatus === 3
                ? '撤机'
                : ''
      }
    })
    this.Fmdata = Fmdata
    // console.log(this.Fmdata);

    this.getsearchList()
  },
  components: {
    fixingtop,
    fixingbtn,
    fixingbottom
  },

  methods: {

    /* 全部的数据 */
    async getsearchList () {
      const data = await getsearchList({
        pageIndex: '',
        pageSize: 10000
      })
      // console.log(data.data.currentPageRecords);
      const list = data.data.currentPageRecords.map((item, index) => {
        return {
          num: index + 1,
          number: item.innerCode,
          model: item.type?.name ? item.type.name : '未知',
          address: item.node?.name ? item.node.name : '未知',
          partners: item.ownerName ? item.ownerName : '未知',
          state:
            item.vmStatus === 1
              ? '运营'
              : '' || item.vmStatus === 0
                ? '未投放'
                : '' || item.vmStatus === 3
                  ? '撤机'
                  : ''
        }
      })
      this.totalList = list
    },
    // 批量策略管理的方法
    // Bulk_policy(){

    // },
    multipleSelectionlist (val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection);
    },
    handleCloseFn () {
      this.Bulk_policy = false
    },

    async getgameData () {
      if (this.multipleSelection.length !== 0) {
        this.Bulk_policy = true
        const res = await getgamedata()
        this.getgamedata = res.data.map((item) =>
          item.policyName ? item.policyName : ''
        )
        this.applyPolicy = res.data
      } else {
        this.$message.warning('请勾选售货机')
      }
    },

    async goapplyPolicy () {
      try {
        this.loading = true
        const policyId = (this.applyPolicy.find(item => item.policyName === this.Bulk_policy_text)).policyId
        console.log(policyId)
        const innerCodeList = this.multipleSelection.map(item => item.number)
        console.log(innerCodeList)
        await GetApplyPolicy({
          innerCodeList,
          policyId
        })
        this.Bulk_policy = false
        this.loading = false
        this.$message.success('操作成功')
        this.Bulk_policy_text = ''
        this.getsearchList()
      } catch (e) {
        this.$message.error('请选择策略类型')
      }
    },

    // 批量策略管理的方法

    // 上一页下一页
    async show () {
      this.$store.commit('fixing/changeDiaLog')
      //  请求一
      const res = await getadd({
        pageIndex: 1,
        pageSize: 10000
      })
      console.log(res.data.currentPageRecords)
      const dianwei = res.data.currentPageRecords.map((item) => item.name)
      console.log(dianwei)
      this.dianwei = dianwei
      this.dianweilist = res.data.currentPageRecords

      // 请求二
      const data = await getaddxinghao({
        pageIndex: 1,
        pageSize: 10000
      })
      console.log(data.data.currentPageRecords)
      this.xinghaolist = data.data.currentPageRecords
      const xinghao = data.data.currentPageRecords.map((item) => item.name)
      console.log(xinghao)
      this.xinghao = xinghao
    },
    changeFmFn (val) {
      if (!val.length) {
        this.Fmdata = []
        this.Fmdata.push(val)
      } else {
        this.Fmdata = val
      }
    }
  },
  computed: {}
}
</script>

<style lang="less" >
::v-deep .el-dialog__title {
  font-size: 16px !important;
  font-weight: bold !important;
}
.Bulk_policy_box {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 0 40px;
}
.Bulk_policy_box1 {
  margin-top: 20px;
}
// ::v-deep .el-dialog__body{
//       width: 492px !important;
// }
.btn11:hover {
  color: #606266;
}
::v-deep .el-dialog__footer {
  text-align: center !important;
}
::v-deep .el-button.el-button--primary {
  border: none;
  margin-left: 20px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
}
::v-deep .el-button.el-button--default {
  border: none;
  background-color: #fbf4f0 !important;
}
::v-deep .select_option {
  width: 330px !important;
}
.el-card.box-card.box_top.is-always-shadow {
  box-shadow: none !important;
  border: 0px !important;
}
.el-card.box-card.box_bottom.is-always-shadow {
  box-shadow: none !important;
  border: 0px !important;
}
.box_bottom {
  height: 70%;
  margin-top: 20px;
  .btn1 {
    height: 38px;
    width: 80px;
    border: none;
    margin-left: 10px;
    color: #655b56;
    background-color: #fbf4f0 !important;
    border-radius: 4px;
    font-weight: 400px;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
  }
}
</style>
